import { Card, Button, Form, Input, message } from 'antd'
import React from 'react'
import './login.scss'
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'
function Login() {
  const { loginStore } = useStore()
  const navigate = useNavigate()
  // 提交表单
  const onFinish = async ({ password, username }) => {
    await loginStore.login({ mobile: username, code: password })
    navigate('/', { replace: true })
    message.open({
      type: 'success',
      content: '登录成功',
    })
  }
  return (
    <div className="flex container">
      <div className="login_content">
        <Card title="星期天">
          <Form
            name="login"
            autoComplete="off"
            onFinish={onFinish}
            initialValues={{
              username: '13811111111',
              password: '246810',
            }}>
            <Form.Item
              label="账号"
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}>
              <Input placeholder="请输入账号" maxLength="{11}" />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}>
              <Input.Password placeholder="请输密码" />
            </Form.Item>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form>
        </Card>
      </div>
    </div>
  )
}

export default Login
